<div class="text-center pb-lg">
    <h1 class="py-md mt-sm">帮助中心</h1>
    <p>帮助用户快速找到问题答案</p>
</div>
<div class="text-center">
    <nz-input-group [nzCompact]="true">
        <input [(ngModel)]="q" placeholder="请用关键词进行搜索，例如“服务器密码重置”" style="width: 50%;" nz-input [nzSize]="'large'">
        <nz-select [(ngModel)]="type" [nzSize]="'large'" style="width:20%;">
            <nz-option [nzLabel]="'不限'" [nzValue]="''"></nz-option>
            <nz-option [nzLabel]="'弹性计算'" [nzValue]="'弹性计算'"></nz-option>
            <nz-option [nzLabel]="'存储与CDN'" [nzValue]="'存储与CDN'"></nz-option>
            <nz-option [nzLabel]="'会员服务'" [nzValue]="'会员服务'"></nz-option>
            <nz-option [nzLabel]="'数据库'" [nzValue]="'数据库'"></nz-option>
        </nz-select>
        <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="search()">
            <span>搜索</span>
        </button>
    </nz-input-group>
    <p class="py-sm text-grey-dark">
        搜索热词：
        <a (click)="quick('远程连接服务器')">远程连接服务器</a>
        <a (click)="quick('挂载数据盘')">挂载数据盘</a>
        <a (click)="quick('域名解析')">域名解析</a>
        <a (click)="quick('域名实名认证')">域名实名认证</a>
        <a (click)="quick('账号实名认证')">账号实名认证</a>
        <a (click)="quick('忘记密码')">忘记密码</a>
    </p>
</div>
<div nz-row [nzGutter]="16" class="py-lg">
    <div nz-col [nzXs]="12" [nzMd]="8">
        <nz-card>
            <ng-template #body>
                <a (click)="msg.info('弹性计算')" class="d-block text-center text-primary">
                    <i class="fa fa-5x fa-television mb-lg"></i>
                    <h2>弹性计算</h2>
                </a>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzXs]="12" [nzMd]="8">
        <nz-card>
            <ng-template #body>
                <a (click)="msg.info('存储与CDN')" class="d-block text-center text-red">
                    <i class="fa fa-5x fa-coffee mb-lg"></i>
                    <h2>存储与CDN</h2>
                </a>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzXs]="12" [nzMd]="8">
        <nz-card>
            <ng-template #body>
                <a (click)="msg.info('会员服务')" class="d-block text-center text-orange">
                    <i class="anticon anticon-user fa-5x mb-lg"></i>
                    <h2>会员服务</h2>
                </a>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzXs]="12" [nzMd]="8">
        <nz-card>
            <ng-template #body>
                <a (click)="msg.info('数据库')" class="d-block text-center text-purple">
                    <i class="fa fa-5x fa-database mb-lg"></i>
                    <h2>数据库</h2>
                </a>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzXs]="12" [nzMd]="8">
        <nz-card>
            <ng-template #body>
                <a (click)="msg.info('域名与网站')" class="d-block text-center text-cyan">
                    <i class="fa fa-5x fa-sitemap mb-lg"></i>
                    <h2>域名与网站</h2>
                </a>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzXs]="12" [nzMd]="8">
        <nz-card>
            <ng-template #body>
                <a (click)="msg.info('网络')" class="d-block text-center text-teal">
                    <i class="fa fa-5x fa-eraser mb-lg"></i>
                    <h2>网络</h2>
                </a>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzXs]="12" [nzMd]="8">
        <nz-card>
            <ng-template #body>
                <a (click)="msg.info('应用服务')" class="d-block text-center text-pink">
                    <i class="anticon fa-5x anticon-appstore-o mb-lg"></i>
                    <h2>应用服务</h2>
                </a>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzXs]="12" [nzMd]="8">
        <nz-card>
            <ng-template #body>
                <a (click)="msg.info('开发者工具')" class="d-block text-center text-success">
                    <i class="anticon fa-5x anticon-tool mb-lg"></i>
                    <h2>开发者工具</h2>
                </a>
            </ng-template>
        </nz-card>
    </div>
</div>
